<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现购物车结算功能代码</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

<body>
    <div class="catbox">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label>
                            <input class="check-all check" type="checkbox" />&nbsp;&nbsp;全选</label></th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/1.jpg" alt="" /><span>Casio/卡西欧 EX-TR350</span></td>
                    <td class="price">5999.88</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">5999.88</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                    <td class="price">3888.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">3888.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                    <td class="price">1428.50</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">1428.50</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
                <tr>
                    <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                    <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                    <td class="price">640.60</td>
                    <td class="count"><span class="reduce"></span>
                        <input class="count-input" type="text" value="1" />
                        <span class="add">+</span></td>
                    <td class="subtotal">640.60</td>
                    <td class="operation"><span class="delete">删除</span></td>
                </tr>
            </tbody>
        </table>
        <div class="foot" id="foot">

            <a class="fl" id="deleteAll" href="javascript:;">删除</a>
            <div class="fr closing" onclick="getTotal();">结 算</div>
            <input type="hidden" id="cartTotalPrice" />
            <div class="fr total">合计：￥<span id="priceTotal">0.00</span></div>
            <div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span
                    class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1.jpg"><span>取消选择</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </div>
</body>
<script>

    // 加法   1. 点击数量+1   2. 小计价格要更新   3. 减号出现

    var addList = document.getElementsByClassName("add");
    var reduceList = document.getElementsByClassName("reduce");

    for (var i = 0; i < addList.length; i++) {
        var add = addList[i];
        add.onclick = function () {

            // 数量加一
            var countInp = prev(this);  //获取 被点击的加号的 前的  input
            // console.log(countInp);
            var num = countInp.value * 1;
            num++;
            countInp.value = num;

            // 减号出现
            var reduce = prev(countInp);  //获取 被点击的加号的 前面的 减号
            // console.log(reduce);
            reduce.innerText = "-";

            // 获取当前 被点击的加号的  父元素
            var par = this.parentElement;  //找到父级

            //找到 父级的前一个元素  priceTd
            var priceTd = prev(par);
            var price = priceTd.innerText; //获取 单价
            console.log(priceTd, price);

            //找到小计框  父级的后一个元素
            var subtotal = next(par);

            subtotal.innerText = (price * num).toFixed(2);

        }
    }


    // 减号  
    // 1. 数量减1    2.小计要更新   
    // 3. 数量 等于一的时候 "-" 要消失  4.数量等于1时 再次点击减号没有用

    for (var j = 0; j < reduceList.length; j++) {
        var reduce = reduceList[j];
        reduce.onclick = function () {
            // console.log(this);

            var countInp = next(this);
            console.log(countInp);
            // 初始的num 的值
            var num = countInp.value;

            // 减之前判断  num数量是否已经为 1  若为1 则不能再减了
            if (num == 1) {
                console.log("您现在的num值为1,不能再减了");
                return false;
            }

            num--;
            // 减值后  num  的值
            if (num == 1) {
                this.innerText = "";
            }
            countInp.value = num;


            // 获取父元素
            var par = this.parentNode;

            var priceTd = prev(par);
            var price = priceTd.innerText;


            // subtotal
            var subtotal = next(par);
            subtotal.innerText = (price * num).toFixed(2);




        }
    }































    // 查找上一个元素
    function prev(ele) {
        if (ele.previousElementSibling) {  //常规浏览器
            return ele.previousElementSibling;
        } else {// 低版本 IE  ele.previousElementSibling => undefined
            return ele.previousSibling;
        }
    }

    //  查找下一个元素
    function next(ele) {
        if (ele.nextElementSibling) {  //常规浏览器
            return ele.nextElementSibling;
        } else {// 低版本 IE  ele.nextElementSibling => undefined
            return ele.nextSibling;
        }
    }


</script>

</html>